import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Welcome from './Component/Welcome';
import Clock from './Component/Clock';
import Antd from './Component/Antd';
import Product from './Component/product/product';

import { Layout, Menu, Icon } from 'antd';
import { HashRouter  as Router, Route, Link, Switch } from "react-router-dom";

const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;

class App extends Component {

  menuItemClick({ item, key }) {
    console.log(key)
  }

  render() {

    // const comment = {
    //   date: new Date(),
    //   text: 'I hope you ',
    //   author:  {
    //     name: 'Kitty',
    //     avatarUrl:  'htttp://baidu.com/'
    //   }
    // };

    const menuList = [
      {
        id: 1,
        title: '基础设置',
        sub_permission: [
          {
            id: 10,
            route: '/system-manage',
            title: '系统管理',

          }
        ]
      },
      {
        id: 2,
        title: '产品管理',
        sub_permission: [
          {
            id: 20,
            route: '/product/productInfo',
            title: '产品信息'
          },
          {
            id: 21,
            route: '/product/productAttribute',
            title: '扩展属性'
          }
        ]
      },

    ];

    const subMenu = menuList.map((menu) =>
      <SubMenu
        key={menu.id}
        title={menu.title}
      >
        {
          menu.sub_permission.map((sub) =>
            <Menu.Item key={sub.id} title={sub.route}>
              <span className="nav-text">{sub.title}</span>
              <Link to={sub.route}></Link>
            </Menu.Item>
          )
        }
      </SubMenu>

    );



    return (
      <div className="App">
        {/* <p>welcome </p>
        <Welcome 
          name="wubuze" 
          txt={comment.text}
          author={comment.author}
          />

        <p>Clock 组件 </p>
        <Clock />
        <Antd /> */}

        <Layout>
          <Header>Header</Header>
          <Layout>
            <Sider
              style={{
                overflow: 'auto',
                height: '1000vh',
                position: 'fixed',
                left: 0,
              }}
            >
              <div>
                <Router>
                  <Menu
                    theme="dark"
                    mode="inline"
                    onClick={this.menuItemClick}
                  >
                    {subMenu}
                  </Menu>
                </Router>
              </div>
            </Sider>

            <Content style={{ margin: '24px 16px 0', overflow: 'initial', position: "fixed", left: '200px' }} >
              <Router>
                <Switch>
                  <Route exact  path="/system-manage" component={Welcome}></Route>
                  <Route exact path="/product/productInfo" component={Product}></Route>
                  <Route  component={Welcome}></Route>
                </Switch>
              </Router>
            </Content>
          </Layout>

          {/* <Footer>Footer</Footer> */}
        </Layout>


      </div>
    );
  }
}

export default App;
